<template>
  <el-row class="treetool" style="width: 100%">
    <el-col :span="12" class="left">
      <i :class="mydata.isHead ? 'el-icon-s-platform' : 'el-icon-s-custom'" />
      {{ mydata.name }}
    </el-col>
    <el-col :span="12" class="right">
      <span class="manager">{{ mydata.manager }}</span>
      <el-dropdown @command="handlerCommand">
        <span class="el-dropdown-link">
          操作<i class="el-icon-arrow-down el-icon--right" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="add">添加子部门</el-dropdown-item>
          <el-dropdown-item
            v-if="!mydata.isHead"
            command="check"
          >查看部门</el-dropdown-item>
          <el-dropdown-item
            v-if="!mydata.isHead"
            command="del"
          >删除部门</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-col>
  </el-row>
</template>

<script>
import { delDeptAPI } from '@/api/index'
export default {
  // mydata 传入的数据源
  props: ['mydata'],
  methods: {
    // 点击操作的下拉选择时触发的事件
    handlerCommand(command) {
      if (command === 'add') {
        // 添加子部门
        // 修改父组件里dialogShow的状态 点击新增部门时顺便把id传给父组件
        this.$emit('openAdd', this.mydata.id)
      } else if (command === 'check') {
        // 查看部门
        // 打开新增（编辑）面板
        this.$emit('openEdit', this.mydata.id)
      } else if (command === 'del') {
        // 删除部门
        // 先提示用户是否确定删除数据
        this.$confirm('您确定要删除该部门数据吗')
          .then(async() => {
            // 将删除的数据提交到服务器
            await delDeptAPI(this.mydata.id)
            // 提示删除成功
            this.$message({
              type: 'success',
              message: '你已成功删除该数据'
            })
            // 更新数据(在子组件调用父组件的方法)
            this.$emit('updatedata')
          })
          .catch(() => {
            console.log('取消')
          })
      }
    }
  }
}
</script>

<style></style>
